<template>
    <inputCom @add="handleAdd"></inputCom>
    <listCom :list="newData" @del="handleDel" @getFlag="handleFlag" :allCom="allCom" :wwcCom="wwcCom"  :ywcCom="ywcCom"></listCom>
</template>
<script setup>
import { ref, computed } from "vue"
import inputCom from "./input.vue"
import listCom from "./list.vue"

let listArr = ref([
    {
        id: 1,
        todo: '吃',
        isCompleted: false
    },
    {
        id: 2,
        todo: '看世界杯',
        isCompleted: true
    },
])


let handleAdd = (val) => {
    console.log(val);
    let obj = {
        id: Math.random().toString(32).substring(2),
        todo: val,
        isCompleted: false
    }
    listArr.value.push(obj)

}
let handleDel = (index) => {
    listArr.value.splice(index, 1)
}

let filterType = ref('all')

let handleFlag = (flag) => {
    filterType.value = flag

} 


let allCom = computed(() => {
    return listArr.value.length
})
let wwcCom = computed(() => {
    let newlist = listArr.value.filter((item) => {
        return !item.isCompleted
    })
    return newlist.length
})
let ywcCom = computed(() => {
    let newlist = listArr.value.filter((item) => {
        return item.isCompleted
    })
    return newlist.length
})

let newData = computed(() => {
    //判断函数接收的参数
    if (filterType.value === 'all') {
        //全部
        return listArr.value
    } else if (filterType.value === 'completed') {
        //已完成
        let newlist = listArr.value.filter((item) => {
            return item.isCompleted
        })
        return newlist
    } else if (filterType.value === 'active') {
        //未完成
        let newlist = listArr.value.filter((item) => {
            return !item.isCompleted
        })
        return newlist
    }

})
</script>